<template>
      <div class="cpCon cursor" >
        <!--  -->
          <div class="lesson_box flex-fl">
          <div class="fl lft_box head_img t-center posRea">
                <el-image  style="border-radius:50%;overflow:hidden;" fit="cover" :src='list.user.avatarUrl' />
                <el-image class="posAb posTopLft titleUrl" style="width: 74px;top:40px; overflow: hidden;height:45px" fit='contain' v-if="list.user.title" :src="list.user.title" />
                <p>{{list.user.name}}</p>
          </div>
          <div class="rig_box" style="height:135px">
            <div class='titleC' ><b v-html="list.title"></b></div>
            <div class="trick">
            <span v-for='(clItem,i) in list.categoryList' :key="i">{{clItem | filterCate(i,list.categoryList)}}
            </span> &nbsp;&nbsp;<span>{{list.classTime}}</span>
              <div class="specific_group  textHide ">{{list.profiles}}</div>
              <div class="mark_radio textHide l1" v-if='list.tags'>
                <span class="lesson_t" :key='i' v-for="(item,i) in list.tags">{{item}}</span>
              </div>

            </div>
          </div>
          <div class="foot_bar_group  t-right" >
            <el-button @click='buttonFn(0,list)' type="text" icon="el-icon-view">{{list.countThumb}}</el-button>
            <el-button @click='buttonFn(1,list)' type="text" icon="el-icon-message">{{list.countComment}}</el-button>
            <el-button @click='buttonFn(2,list)' type="text" icon="el-icon-share">{{list.countShare}}</el-button>
            <el-button @click='buttonFn(3,list)' type="text" icon="el-icon-time">{{parseTime(list.createTime,'{y}-{m}-{d}')}}</el-button>
          </div>
          </div>

      </div>
</template>

<script>
  import { parseTime } from '@/utils'
  export default {
    name:'LessonList',
    data(){
      return {

        classify:""
      }
    },
    props:['list'],
    methods:{
      parseTime,
      buttonFn(ind,list){
        console.log("buttonGroup",ind,list)
        this.$emit('buttonFn',{ind,list})
      },
      // listCanback(){
      //   this.$emit('list-click',{ind,list})
      // }
    },
    watch:{

    }
  }
</script>

<style lang="scss" scoped>
  $bg:#2EB06F;
  $gray:#E6F5ED;
  $labg:#ddeae4;
  $textColr-2:rgba(0, 0, 0, .45);
    .cpCon {
      padding: 4px;
          .lesson_box {
            align-items: flex-start;
            overflow: hidden;
            //height:190px;
            //max-height: 190px;
            border-radius: 10px;
            box-shadow: 1px 5px 9px 0px #d9dce2;
            padding: 12px;
             }
            .isAuthor{
                 color: #2EB06F;
                 background: $labg;
                 border-radius:20%;
                 padding:0 5px;
                 margin-right:5px;
            }
            .creater_radio {
              border-radius: 20px;
              background: #F1F1F1;
            }

            .lft_box{
               overflow: hidden;
              // width:65px;

             }
            .head_img {
              width: 90px;
              padding:0 8px;
              .el-image{
                //height: auto;
                height:74px;
                width: 100%;

              }
              img {

              }
              p{
                font-size: 12px;
              }
            }
            .rig_box {
              .titleC{font-size:16px}
              padding-left: 90px;
              width: 100%;
              .mark_radio {
                >span {
                  color: $bg;
                  background: $labg;
                  border-radius: 12px;
                  padding:0 5px;
                  margin: 5px;
                }
              }
            }
            .foot_bar_group{

              .el-button{
                font-size:16px;
              }
            }
    }

</style>
